<template>
  <div>
    <a-modal
      :visible.sync="visible"
      :maskClosable="false"
      :keyboard="!formModal.loading"
      :closable="!formModal.loading"
      title="外部科技人员信息"
      width="760px"
      :destroyOnClose="true"
      @cancel="cancelSub"
      centered
    >
    <!-- :destroyOnClose="true" 如果希望每次打开都是新内容，设置 destroyOnClose-->
      <a-form-model class="flex-model-form"
        ref="addForm"
        :model="formModal.form"
        :rules="formModal.rules"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="姓名" prop="name">
              <BaseInput v-model="formModal.form.name" placeholder="请输入姓名" :disabled="eidtabled"></BaseInput>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="性别" prop="sex">
              <a-select
                show-search
                :disabled="eidtabled"
                v-model="formModal.form.sex"
                style="width: 100%;text-align: left;"
                placeholder="请选择性别"
              >
                <a-select-option v-for="(item, index) in sexMap" style="text-align: left;" :key="item.id" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="电话号码" prop="phone">
              <BaseInput v-model="formModal.form.phone" placeholder="请输入电话号码" :disabled="eidtabled"></BaseInput>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="职务" prop="jobTitle">
              <BaseInput v-model="formModal.form.jobTitle" placeholder="请输入职务" :disabled="eidtabled"></BaseInput>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="职称" prop="title">
              <BaseInput v-model="formModal.form.title" placeholder="请输入职称" :disabled="eidtabled"></BaseInput>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="单位" prop="unit">
              <BaseInput v-model="formModal.form.unit" placeholder="请输入单位" :disabled="eidtabled"></BaseInput>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="最高学历">
              <BaseInput v-model="formModal.form.education" placeholder="请输入最高学历" :disabled="eidtabled"></BaseInput>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="年龄">
              <BaseInput v-model="formModal.form.age" disabled ></BaseInput>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="出生日期">
              <a-date-picker v-model="formModal.form.birthDay"
                :disabled="eidtabled"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                @change="getAge"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="身份证号码" prop="cardID">
              <BaseInput v-model="formModal.form.cardID" placeholder="请输入身份证号码" :disabled="eidtabled"></BaseInput>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      
      <template slot="footer">
        <a-button :disabled="formModal.loading" key="back" @click="cancelSub">
          取消
        </a-button>
        <a-button v-if="!eidtabled" key="submit" type="primary" :loading="formModal.loading" @click="submitForm">
          确认
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>

import { outerAdd, outerUpdate, getOuter } from '@/api/science'
export default {
    name: 'AddModal',
    props: {
      visible: {
        type: Boolean,
        default() {
            return true
        }
      },
      modalType: {
        type: String,
        default() {
          return 'add'
        }
      },
      editId: {
        type: [String, null],
        default() {
          return null
        }
      }
    },
    components: {
    },
    data() {
        let isNum = (rule, value, callback) => {
            const num= /^[0-9]*$/
            if (!num.test(value)) {
              value = ''
              callback(new Error('只能输入数字'))
            }else{
              callback()
            }
        }
        return {
          sexMap: [
            {id: '0', name: '男'},
            {id: '1', name: '女'}
          ],
          formModal: {
            loading: false,
            picture: [],
            form: {
              age: '',
              name: '',
              phone: '',
              sex: undefined,
              jobTitle: '',
              title: '',
              unit: '',
              education: '',
            },
            rules: {
              name: [
                { required: true, message: '请输入姓名', trigger: 'blur' },
              ],
              sex: [
                { required: true, message: '请选择性别', trigger: 'change' },
              ],
              // phone: [
              //   // { required: true, message: '请输入电话号码', trigger: 'blur' },
              //   { pattern: /^[0-9]*$/, message: '电话号码只能是数字', trigger: 'blur' }
              // ],
              // jobTitle: [
              //   { required: true, message: '请输入职务', trigger: 'blur' },
              // ],
              // title: [
              //   { required: true, message: '请输入职称', trigger: 'blur' },
              // ],
              // unit: [
              //   { required: true, message: '请输入单位', trigger: 'blur' },
              // ],
              // education: [
              //   { required: true, message: '请输入学历', trigger: 'blur' },
              // ],
              cardID: [
                { pattern: /^[0-9]*$/, message: '身份证号只能是数字', trigger: 'blur' }
              ]
            },
          },
        }
    },
    watch: {
      visible: {
        handler(nv, old) {
          if (this.$refs.addForm) this.$refs.addForm.resetFields();
          if (nv) {
            if(this.modalType !== 'add') {
              this.getDetail();
            } else {
              this.formModal.form = {
                name: '',
                phone: '',
                sex: undefined,
                jobTitle: '',
                title: '',
                unit: '',
                education: '',
              }
            }
          }
        }
      },
    },
    computed: {
      showModal() {
        return this.visible
      },
      eidtabled() {
        return this.modalType === 'look'
      },
      // modalTitle() {
      //   const title = {
      //     'look': '查看会议室',
      //     'edit': '编辑会议室',
      //     'add': '新增会议室'
      //   }
      //   return title[this.modalType];
      // },
    },
    created() {
    },
    mounted() {
    },
    methods: {
      getAge(e) {
        if (e) {
          let birthday = new Date(e.replace(/-/g, "\/")); 
          let d = new Date(); 
          let age = d.getFullYear() - birthday.getFullYear() - ((d.getMonth() < birthday.getMonth() || d.getMonth() == birthday.getMonth() && d.getDate() < birthday.getDate()) ? 1 : 0);
          this.formModal.form.age = age
        } else {
          this.formModal.form.age = ''
        }
      },
      getDetail() {
        getOuter({id: this.editId}).then((res) => {
          if (res.code == 200) {
            this.formModal.form = res.data
            if (res.data.birthDay && !res.data.age) this.getAge(res.data.birthDay)
          }
        })
      },
      cancelSub(reset) {
        this.$refs.addForm.resetFields();
        this.$emit('update:visible', false)
      },
      onSubmit(param) {
        if (this.modalType == 'add') {
          this.addRoom(param)
        } else if (this.modalType == 'edit'){
          this.editRoom(param)
        }
      },
      addRoom(param) {
        this.formModal.loading = true;
        outerAdd(param).then((res) => {
          console.log(res)
          this.formModal.loading = false
          if ((res && res.code == 200) || (res.data && res.data.code == 200)) {
            this.$message.success('外部科技人员新增成功！')
            this.$emit('submitForm')
            this.cancelSub('reset')
          } else {
            this.$message.error('外部科技人员新增失败！')
          }
        }).catch(() => {
          this.formModal.loading = false
        })
      },
      editRoom(param) {
        this.formModal.loading = true;
        outerUpdate(param).then((res) => {
          this.formModal.loading = false
          if ((res && res.code == 200) || (res && res.data && res.data.code == 200)) {
            this.$message.success('外部科技人员修改成功！')
            this.$emit('submitForm')
            this.cancelSub('reset')
          } else {
            this.$message.error('外部科技人员修改失败！')
          }
        }).catch(() => {
          this.formModal.loading = false
        })
      },
      submitForm() {
        // const formData = [...this.formModal.form];
        // formData.sex = formData.sex.toString();
        console.log(this.formModal.form)
        this.$refs.addForm.validate(valid => {
          if (valid) {
            console.log('submit!');
            this.onSubmit(this.formModal.form)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
}
</script>
<style lang="less" scoped>
  .flex-model-form .ant-form-item{
    display: flex;
  }
  .upload-list .ant-upload-list {
    // display: contents;
  }
  // .upload-list .ant-upload-list-item-image::after {
  //   content: '';
  //   display: inline-block;
  //   position: absolute;
  //   z-index: 2;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   background-image: url("../../../../../assets/noPic.png");
  //   background-size: cover;
  //   background-color: #fff;
  // }
</style>